<template>
  <div class="opration">
    <div class="oprationLeft">
      <bs-add-button-icon @click.native="doAdd" v-has="'SYS_USER_SAVE'"></bs-add-button-icon>
      <bs-delete-button-icon @click.native="doDel" v-has="'SYS_USER_DELETE'"></bs-delete-button-icon>
      <bs-edit-button-icon @click.native="doUpdate" v-has="'SYS_USER_UPDATE'"></bs-edit-button-icon>
      <bs-refresh-button-icon
        @click.native="doRefresh"
      ></bs-refresh-button-icon>
    </div>
    <div class="oprationRight">
        <el-form :inline="true" size="small" :model="queryData">
          <el-form-item>
            <el-select
              v-model="queryData.queryType"
              :placeholder="$t('全部选项')"
              clearable
              style="width: 100px"
              @clear="doClearQuery"
            >
              <el-option
                v-for="(item, index) in searchItemData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('请输入关键词搜索')"
              v-model="queryData.queryParam"
              clearable
              style="width: 160px"
            >
              <template slot="prepend"
                ><i class="iconfont icon-sousuo"
              /></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <bs-search-button-icon
              @click.native="doQuery"
            ></bs-search-button-icon>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script>
export default {
  name: 'SysManageCondition',
  data() {
    return {
      rows: [],
      queryData:{
        queryType:0,
        queryParam:'',
      },
       searchItemData: [
        { name: this.$t('全部选项'), value: 0 },
        { name: this.$t('用户名'), value: 1 },
        { name: this.$t('昵称'), value: 2 },
        { name: this.$t('角色'), value: 3 },
        { name: this.$t('分组'), value: 4 },
      ],
    }
  },
  props: {
    allSize: {
      type: Boolean,
      default: false
    },
    pageData: {
      type: Object,
      default: () => {}
    },
    requestParam: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    doQuery(){
      this.$eventBus.$emit('doQuery', this.queryData)
    },
    doAdd() {
      const editorForm = {}
      this.$eventBus.$emit('userAddShow', editorForm, true)
    },
    doDel() {
      if(!this.allSize) {
        if (this.rows.length == 0) {
          return
        }
      }
      this.$confirm(this.$t('提示'), this.$t('是否确定删除')).then((bool) => {
        if (bool) {
          let param = {
            userIds: [],
          }
          let queryData = {}
          if(this.allSize) {
            queryData = {
              ...this.requestParam,
              allSize: this.allSize,
              total: this.pageData.total
            }
          } else {
            this.rows.forEach(element => {
              param.userIds.push(element.id)
            });
          }
          this.$store.dispatch('system/deleteUser', {
            ...param,
            ...queryData
          }).then((res) => {
            this.$success('del')
             this.$emit('load-userlist',{ current: 1 })
          })
        }                                                                                                                                                                                                                                          
      })
    },
    doUpdate() {
      if (this.rows.length == 0) {
        return
      }
      if (this.rows.length > 1) {
        this.$alert(this.$t('提示'), this.$t('此操作不支持多选'))
        return
      }
      this.$eventBus.$emit('userAddShow', this.rows[0], false)
    },
    selectChange(val) {
      this.rows = val
    },
    doRefresh() {
      this.queryData = {
        queryType:0,
        queryParam:'',
      }
      this.$eventBus.$emit('doQuery', this.queryData)
      // this.$emit('do-refresh')
    },
    // 点击清除下拉选择条件
    doClearQuery() {
      this.queryData.queryType = 0
      this.queryData.queryParam = ''
    },
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.opration {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
</style>